iT邦幫忙

2023 iThome 鐵人賽

DAY 28
0
自我挑戰組

網頁學習30天系列 第 28

網頁學習30天 day28

  • 分享至 

  • xImage
  •  

上次我們使用自定義模塊來寫了簡易的加減乘除功能,今天我把它變的實際可以操作,我使用了express模組處理後端,再透過html、css以及javascript來處理前端。
首先建立 Node.js 應用程式入口檔案:建立一個名為 "app.js" 的 Node.js 檔案,該檔案將作為應用程式的進入點。在這個檔案中,我們引入 Express.js 並建立一個 Express 應用程式,設定靜態檔案目錄("public" 資料夾)以提供前端資源,並設置一個路由來處理根路徑的 GET 要求。最後,我們在埠口 3000 上啟動伺服器。

建立前端界面:在 "public" 資料夾中建立一個 "index.html" 檔案,該檔案包含了 Web 計算機的前端使用者介面。它包括一個標題、一個用於顯示計算機輸入和輸出的文字框,以及數字和運算符按鈕。每個按鈕都帶有一個 "onclick" 事件處理程序,用於回應使用者的點擊操作。

JavaScript 互動:在 "index.html" 檔案中,我們使用 JavaScript 處理使用者的輸入並顯示計算結果。以下是 JavaScript 函數的作用:

addToDisplay(value):當使用者點擊數字按鈕或運算符按鈕時,將按鈕上的值附加到文字框的值上。

clearDisplay():清除文字框的內容。

calculate():嘗試使用 JavaScript 的 "eval" 函數執行文字框中的表達式,然後將結果顯示在文字框中。如果出現錯誤,將顯示 "Error"。

最後啟動伺服器:使用 "node app.js" 命令啟動 Node.js 伺服器,該伺服器將在 http://localhost:3000 上運行。
app.js:

const express = require('express');
const app = express();
const path = require('path');

app.use(express.static(path.join(__dirname, 'public')));

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

前端部分:

<!DOCTYPE html>
<html>
<head>
  <title>Web Calculator</title>
</head>
<body>
  <h1>Web Calculator</h1>
  <input type="text" id="display" disabled>
  <div>
    <button onclick="addToDisplay('7')">7</button>
    <button onclick="addToDisplay('8')">8</button>
    <button onclick="addToDisplay('9')">9</button>
    <button onclick="addToDisplay('+')">+</button>
  </div>
  <div>
    <button onclick="addToDisplay('4')">4</button>
    <button onclick="addToDisplay('5')">5</button>
    <button onclick="addToDisplay('6')">6</button>
    <button onclick="addToDisplay('-')">-</button>
  </div>
  <div>
    <button onclick="addToDisplay('1')">1</button>
    <button onclick="addToDisplay('2')">2</button>
    <button onclick="addToDisplay('3')">3</button>
    <button onclick="addToDisplay('*')">*</button>
  </div>
  <div>
    <button onclick="addToDisplay('0')">0</button>
    <button onclick="clearDisplay()">C</button>
    <button onclick="calculate()">=</button>
    <button onclick="addToDisplay('/')">/</button>
  </div>
  <script>
    const display = document.getElementById('display');

    function addToDisplay(value) {
      display.value += value;
    }

    function clearDisplay() {
      display.value = '';
    }

    function calculate() {
      try {
        display.value = eval(display.value);
      } catch (error) {
        display.value = 'Error';
      }
    }
  </script>
</body>
</html>

使用畫面:
https://ithelp.ithome.com.tw/upload/images/20231013/20162857raVn0jCxgj.png


上一篇
網頁學習30天 day27
下一篇
網頁學習30天 day29
系列文
網頁學習30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言